<template>
  <div class="xtx_goods_popular">
    <div class="container">
      <!-- 面板头部 -->
      <div class="xtx_panel_header">
        <h3>
          人气推荐
          <small>人气爆款 不容错过</small>
        </h3>
      </div>
      <!-- 商品列表 -->
      <div class="xtx_panel_goods">
        <a href="javascript:;" v-for="(item,i) in goods" :key="item.id" @click="go(i)">
          <img :src="item.picture" />
          <span class="title">{{item.title}}</span>
          <span class="alt">{{item.alt}}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-hot',
  data () {
    return {
      goods: []
    }
  },
  created () {
    this.getGoods()
  },
  methods: {
    getGoods () {
      this.$http.get('/home/hot').then((res) => {
        this.goods = res.data.result
      })
    },
    go (i) {
      if (i === 1) {
        this.$router.push('/vogue')
      }
      if (i === 3) {
        this.$router.push('/one')
      }
    }
  }
}
</script>

<style scoped lang='less'>
@import "../styles/_mixins.less";
.xtx_goods_popular {
  margin-bottom: 30px;
  .home_panel_header();
  .xtx_panel_goods {
    display: flex;
    justify-content: space-between;
    a {
      transition:all 0.5s;
      top: 0;
      display: inline-block;
      width: 306px;
      height: 406px;
      text-align: center;
      transform: translateZ(0);
      &:hover {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        transform: translate(0, -3px);
      }
    }

    img {
      width: 306px;
      height: 306px;
    }

    .title {
      display: inline-block;
      width: 100%;
      line-height: 1;
      margin: 20px 0 16px;
      font-size: 22px;
    }

    .alt {
      font-size: 18px;
      color: #999;
    }
  }
}
</style>
